import type { GreasyForkElements } from '../../../../../../../../../types/constants/personalization/greasy_fork'
import { ThemeVarService } from '../../../../../../../../../lib/abstract/style/theme_var/service'
import { PageHandler } from '../../../../../../../../../lib/page_handler'
import {
  AppStyleCollections,
  PAGE_ELEMENTS,
  PROJECT_PREFIX,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../../types/constants'

export class DiscussionsDetailPage {
  elements: GreasyForkElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.GREASY_FORK]
  private readonly itemFullSelector = `.text-content > .comment`
  private static instance: DiscussionsDetailPage
  private pageHandler: PageHandler = PageHandler.getInstance()
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): DiscussionsDetailPage {
    if (!DiscussionsDetailPage.instance) {
      DiscussionsDetailPage.instance = new DiscussionsDetailPage()
    }
    return DiscussionsDetailPage.instance
  }

  init(): void {
    // 处理评论内容
    const $container = $(this.itemFullSelector)
    $container.each((_index, element) => {
      const $element = $(element)
      const userLinkSelector = '.comment-meta .user-link'
      const selfLinkSelector = '.comment-meta .self-link'
      const $selfLink = $element.find(selfLinkSelector)

      // 隐藏锚点链接
      $selfLink.closest('.comment-meta-item').addClass(AppStyleCollections.Hide.ELEMENT)

      // 添加用户标签
      this.pageHandler.services.greasyFork.handleUserTag($element, userLinkSelector)
    })

    // 标识注销用户
    this.pageHandler.services.greasyFork.formatDeletedUser(`${this.itemFullSelector} .comment-meta > .comment-meta-item > i`)
  }

  getMainStyles(): string {
    return `
.text-content {
  h2 {
    color: var(--${PROJECT_PREFIX}-theme-text-primary) !important;
    margin-top: 0 !important;
    padding-top: 16px !important;
  }
  
  p {
    padding-top: unset !important;
  }
  
  .discussion-header {
    margin-top: 0 !important;
    padding-top: 16px !important;
    
    .discussion-actions {
      display: flex !important;
      align-items: baseline !important;
    }
  }
  
  /* 结果列表 */
  .comment {
    background: var(${this.themeVarService.default.background.left}) ;
    padding: ${this.themeVarService.default.style.padding};
    border-radius: ${this.themeVarService.default.style.borderRadius};
    
    &.${AppStyleCollections.Body.SCROLL_HIGHLIGHT} {
      background: var(${this.themeVarService.default.background.highlight}) !important;
      transition: background-color 2s ease-in-out;
    }
    
    .comment-meta {
      display: flex;
      align-items: center;
      
      .comment-meta-item {
        display: flex;
        align-items: center;
        
        & > i {
          display: contents;
          .deleted-user-wrapper {
            display: contents;
          }
        }   
      }
    }
    
    .user-content {
      background: var(${this.themeVarService.default.background.left});

      pre {
        &:hover {
          transform: none !important;
          box-shadow: none !important;
        }
      }
    }
  }
}
`
  }
}
